<template>
  <div class="root" :style="{ backgroundImage: `url(${appStore.getBgImg})` }">
    <div class="logo">
      <img alt="logo" :src="appStore.getLogo" />
      <div class="logo-text">{{ appStore.getTitle }}</div>
    </div>
    <div class="container">
      <div class="left-banner"></div>
      <div class="login-card">
        <div class="title">
          {{ appStore.getTitle + $t('login.admin.welcome') }}
        </div>
        <Forget v-if="isForget" />
        <a-tabs v-else class="account-tab">
          <a-tab-pane
            v-if="sysConfig.admin_login.account_login"
            :title="$t('login.account')"
          >
            <AccountLogin />
          </a-tab-pane>
          <a-tab-pane
            v-if="sysConfig.admin_login.email_login"
            :title="$t('login.email')"
          >
            <EmailLogin />
          </a-tab-pane>
        </a-tabs>
        <div class="actions-end">
          <a-link
            v-if="sysConfig.admin_login.email_retrieve && !isForget"
            @click="toggleForget"
          >
            {{ $t('login.form.forget') }}
          </a-link>
          <a-link v-if="isForget" @click="toggleLogin">
            {{ $t('login.form.login') }}
          </a-link>
        </div>
      </div>
    </div>
    <div class="footer">
      <Footer />
    </div>
    <a-layout-footer class="beian">
      <a-link
        v-if="appStore.getIcpBeian"
        target="_blank"
        href="https://beian.miit.gov.cn"
      >
        {{ appStore.getIcpBeian }}
      </a-link>
      &nbsp;
      <a-link
        v-if="appStore.getGaBeian"
        target="_blank"
        :href="`https://beian.mps.gov.cn/#/query/webSearch?code=${
          appStore.getGaBeian ? appStore.getGaBeian.match(`\\d+`) : ''
        }`"
      >
        <img
          style="border: 0"
          src=""
        />
        &nbsp;
        {{ appStore.getGaBeian }}
      </a-link>
    </a-layout-footer>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { useUserStore, useAppStore } from '@/store';
  import { querySysConfig, SysConfigDetail } from '@/api/sys_config';
  import Footer from '@/components/footer/index.vue';
  import AccountLogin from './components/admin-account-login.vue';
  import EmailLogin from './components/admin-email-login.vue';
  import Forget from './components/admin-forget.vue';

  useUserStore().logout();

  const appStore = useAppStore();

  const isForget = ref(false);

  const toggleLogin = () => {
    isForget.value = false;
  };

  const toggleForget = () => {
    isForget.value = true;
  };

  const sysConfig = ref<SysConfigDetail>({
    admin_login: {},
  } as SysConfigDetail);
  querySysConfig().then((res) => {
    sysConfig.value = res.data;
  });
</script>

<style lang="less" scoped>
  .root {
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;

    a {
      color: #3370ff;
      cursor: pointer !important;
      text-decoration: none;
    }

    a:hover {
      color: #6694ff;
    }

    .container {
      align-items: center;
      box-sizing: border-box;
      display: flex;
      height: calc(100vh - 100px);
      justify-content: center;
      margin: 0 auto;
      max-width: 1200px;
      min-height: 650px;
      .left-banner {
        flex: 1 1;
        height: 100%;
        max-height: 700px;
        position: relative;
        img {
          height: 100%;
          left: 0;
          max-height: 350px;
          max-width: 500px;
          object-fit: contain;
          position: absolute;
          top: 4.5%;
          width: 100%;
        }
      }
      .login-card {
        display: flex;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        box-sizing: border-box;
        min-height: 500px;
        position: relative;
        width: 450px;
        flex-direction: column;
        margin-bottom: 53px;
        padding: 48px 43px 32px;
        .title {
          color: #020814;
          font-size: 24px;
          font-weight: 500;
          letter-spacing: 0.003em;
          line-height: 32px;
          padding: 0 5px;
        }
        .account-tab {
          margin-top: 36px;
          :deep(.arco-tabs-nav::before) {
            display: none;
          }
          :deep(.arco-tabs-tab-title) {
            font-size: 16px;
            font-weight: 500;
            line-height: 22px;
            display: inline-block;
            padding: 1px 0;
            position: relative;
          }
          :deep(.arco-tabs-tab-title:hover) {
            color: rgb(var(--primary-6));
          }
          :deep(.arco-tabs-tab-title:before) {
            display: none;
          }
          :deep(.arco-tabs-tab) {
            margin: 0 30px 0 6px;
          }
        }
      }
    }

    .footer {
      align-items: center;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
    }
  }

  .actions {
    display: flex;
    justify-content: space-between;
    .arco-checkbox {
      padding-left: 0;
    }
  }

  .actions-end {
    display: flex;
    justify-content: flex-end;

    .arco-checkbox {
      padding-left: 0;
    }
  }

  .logo {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1;
    display: inline-flex;
    align-items: center;

    &-text {
      // color: var(--color-fill-1);
      font-size: 24px;
    }

    > img {
      width: 32px;
      height: 32px;
      margin-right: 8px;
    }

    .logo-text {
      background: var(--vp-home-hero-name-background);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: var(--vp-home-hero-name-color);
    }
  }

  .footer {
    position: absolute;
    right: 0;
    bottom: 1.5%;
    width: 100%;
  }

  .beian {
    position: absolute;
    right: 0;
    bottom: 0.2%;
    width: 100%;
    align-items: center;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
  }
</style>
